<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--手机屏幕适配-->
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>服务评价</title>
		<link rel="stylesheet" href="./css/weui.css"/>
		<link rel="stylesheet" href="./css/myapp.css"/>
	</head>
	<body>
		<div class="page">
			<div class="bd">
				<div class="weui_cells_title">请您对本次服务内容进行评价：</div>
				<div style="height: 10px;"></div>
				
				<div class="weui_cells weui_cells_access">
					<div class="weui_cell_bd weui_cell_primary">
						<table>
							<tr>
								<td style="text-align:right">
								    <img src="./img/bad.png" name="radio" class="post_images_rounded" id="bad" style="max-height:49px;width:33%" onclick="change(this)" value="noselect">
								    <p id="pbad" style="color:gray">不满意</p>
								</td>
								<td style="text-align:center">
								    <img src="./img/good.png" name="radio" class="post_images_rounded" id="good" style="max-height:49px;width:33%" onclick="change(this)" value="noselect">
								    <p id="pgood" style="color:gray">基本满意</p>
								</td>
								<td style="text-align:left">
								    <img src="./img/verygood.png" name="radio" class="post_images_rounded" id="verygood" style="max-height:49px;width:33%" onclick="change(this)" value="noselect">
								    <p id="pverygood" style="color:gray">&nbsp;满意</p>
								</td>
							</tr>
						</table>
					</div>
				</div> 
				
				<div style="height: 20px;"></div>
				<div class="weui_cells_title">如有建议，欢迎提出</div>
				<div class="weui_cell">
					<textarea class="weui_textarea" name="advice" id="advice" placeholder="请写下您宝贵的建议" rows="4"></textarea>
				</div>
				
				<a href="javascript:;" style="margin-top: 10px;" class="weui_btn weui_btn_primary" onclick="onSubmit()">提交</a>
				<a href="javascript:;" class="weui_btn weui_btn_default" onclick="back()">返回</a>
				
				<div style="height: 10px;"></div>
			</div>
		</div>
		<script type="text/javascript">
			function back(){
				alert("返回");
			}
			
			function onSubmit(){
				var radio = document.getElementsByName("radio");
				var count = 0;
				var selectId;
				for(var i=0; i<radio.length; i++){
					var item = radio[i];
					var value = item.getAttribute("value");
					if(value == "noselect"){
						count++;
					}
					if(value == "select"){
						selectId = item.id;
					}
				}
				if(count == radio.length){
					alert("请选择满意度");
					return;
				}
					
				var evaluateContent = document.getElementById("advice").value;
				alert("满意度：" + document.getElementById("p" + selectId).innerHTML + ",建议：" + evaluateContent);
			}
			
			function change(item){
				if(item.id == "bad"){
					var value = document.getElementById("bad").getAttribute("value");
					if(value == "noselect"){
						setSelect("bad");
						setNoSelect("good");
						setNoSelect("verygood");
					}else{
						setNoSelect("bad");
					}
				}else if(item.id == "good"){
					var value = document.getElementById("good").getAttribute("value");
					if(value == "noselect"){
						setSelect("good");
						setNoSelect("bad");
						setNoSelect("verygood");
					}else{
						setNoSelect("good");
					}
				}else if(item.id == "verygood"){
					var value = document.getElementById("verygood").getAttribute("value");
					if(value == "noselect"){
						setSelect("verygood");
						setNoSelect("bad");
						setNoSelect("good");
					}else{
						setNoSelect("verygood");
					}
				}
			}
				
			function setSelect(id){
				document.getElementById(id).src = "./img/" + id + "select.png";
				document.getElementById(id).setAttribute("value", "select");
				document.getElementById("p" + id).style.color = "black";
			}
				
			function setNoSelect(id){
				document.getElementById(id).src = "./img/" + id + ".png";
				document.getElementById(id).setAttribute("value", "noselect");
				document.getElementById("p" + id).style.color = "gray";
			}
		</script>
	</body>
</html>
